<template>
  <!-- 空海运修改 -->
  <div class="air-sea-edit">
    <el-dialog
      v-model="open"
      :close-on-click-modal="false"
      :title="title"
    >
      <el-scrollbar>
        <el-form
          ref="orderInfo"
          label-width="115px"
          :loading="loading"
          :disabled="title == '详情'"
          :model="form"
          :rules="rules"
          label-position="top"
          inline
        >
          <el-row>
            <el-col :span="24" class="bt">
              <div class="subtitle">收货信息</div>
            </el-col>
            <el-row :gutter="76">
              <el-col
                :span="8"
              >
                <el-form-item label="提单号" prop="ladingNo">
                  <el-input v-model.trim="form.ladingNo" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="报价编号" prop="quotationNo">
                  <el-input v-model="form.quotationNo" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="客户名称" prop="customerCode">
                  <el-select
                    v-model="form.customerCode"
                    style="width: 100%;"
                    placeholder="请选择客户"
                    clearable
                  >
                    <el-option
                      v-for="dict in dicts[DictDirection.客户]"
                      :key="dict.customerCode"
                      :label="dict.customerName"
                      :value="dict.customerCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="客户单号" prop="waybillNo">
                  <el-input v-model="form.waybillNo" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="贸易条款" prop="tradeTerms">
                  <el-input v-model="form.tradeTerms" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="箱号" prop="caseNo">
                  <el-input v-model="form.caseNo" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="76">
              <el-col :span="24" :xs="24">
                <el-form-item
                  label="服务类型"
                  prop="serviceTypeList"
                  class="serviceType-list"
                  label-position="left"
                >
                  <el-checkbox-group v-model="form.serviceTypeList">
                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="form.serviceTypeList.includes('后端派送')" :gutter="76">
              <el-col :span="24" :xs="24">
                <el-form-item label="派送地址" prop="terminalDeliveryAddress">
                  <el-input v-model="form.terminalDeliveryAddress" clearable type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="76">
              <el-col
                :span="8"
              >
                <el-form-item label="服务商" prop="providerServiceCode">
                  <el-select v-model="form.providerServiceCode" style="width: 100%;" placeholder="请输入内容">
                    <el-option
                      v-for="dict in dicts[DictDirection.服务商]"
                      :key="dict.providerServiceCode"
                      :label="dict.serviceWholeName"
                      :value="dict.providerServiceCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="服务渠道" prop="serviceChannelCode">
                  <el-select
                    v-model="form.serviceChannelCode"
                    filterable
                    clearable
                    style="width: 225px;"
                  >
                    <el-option
                      v-for="dict in dicts[DictDirection.服务渠道]"
                      :key="dict.serviceChannelCode"
                      :label="dict.channelChName"
                      :value="dict.serviceChannelCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="国外代理" prop="foreignAgent">
                  <el-input v-model="form.foreignAgent" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="航空/船公司" prop="airlineCompany">
                  <el-input v-model="form.airlineCompany" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="运输类型" prop="transportType">
                  <el-select
                    v-model="form.transportType"
                    filterable
                    style="100%"
                    placeholder="请选择"
                  >
                    <el-option label="空运" :value="3"></el-option>
                    <el-option label="海运" :value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="76">
              <el-col
                :span="8"
              >
                <el-form-item label="货值" prop="valueGoods">
                  <el-input
                    v-model.number="form.valueGoods"
                    :controls="false"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="预计排仓时间" prop="estimatedArrangementTime">
                  <el-date-picker
                    v-model="form.estimatedArrangementTime"
                    type="date"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="起飞/开船日" prop="departureTime">
                  <el-date-picker
                    v-model="form.departureTime"
                    type="date"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="CLASS NO." prop="classno">
                  <el-input v-model="form.classno" clearable></el-input>
                </el-form-item>
              </el-col>
            <!-- <el-col v-if="form.transportType == 5" :span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="报关行" prop="customsLine">
            <el-input clearable v-model="form.customsLine"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="form.transportType == 5" :span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="拖车行" prop="trailerLine">
            <el-input clearable v-model="form.trailerLine"></el-input>
          </el-form-item>
        </el-col> -->
            </el-row>
          </el-row>
          <el-divider></el-divider>
          <!-- 包裹信息 -->
          <el-row :gutter="76">
            <el-col :span="24">
              <div class="subtitle">包裹信息</div>
            </el-col>
            <el-col :span="24">
              <el-scrollbar style="min-height: 101px;">
                <div class="mytable">
                  <el-table
                    :data="form.woodInfoList"
                    show-summary
                    :summary-method="getSummaries"
                  >
                    <el-table-column
                      label="序号"
                      align="center"
                      width="55"
                      type="index"
                    ></el-table-column>
                    <el-table-column label="长(cm)" align="center">
                      <template #default="{ row, $index }">
                        <el-form-item
                          :rules="[{ validator: validatePass, message: '长不能为空', trigger: 'blur' }]"
                          label-width="0"
                          :prop="`woodInfoList.${$index}.length`"
                        >
                          <el-input-number
                            v-model="row.length"
                            controls-position="right"
                            style="width: 100%;"
                            :min="2.54"
                          >
                          </el-input-number>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="宽(cm)" align="center">
                      <template #default="{ row, $index }">
                        <el-form-item
                          :rules="[{ validator: validatePass, message: '宽不能为空', trigger: 'blur' }]"
                          label-width="0"
                          :prop="`woodInfoList.${$index}.width`"
                        >
                          <el-input-number
                            v-model="row.width"
                            controls-position="right"
                            style="width: 100%;"
                            :min="2.54"
                          >
                          </el-input-number>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="高(cm)" align="center">
                      <template #default="{ row, $index }">
                        <el-form-item
                          :rules="[{ validator: validatePass, message: '高不能为空', trigger: 'blur' }]"
                          label-width="0"
                          :prop="`woodInfoList.${$index}.height`"
                        >
                          <el-input-number
                            v-model="row.height"
                            controls-position="right"
                            style="width: 100%;"
                            :min="2.54"
                          >
                          </el-input-number>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="重(kg)" align="center">
                      <template #default="{ row, $index }">
                        <el-form-item
                          :rules="[{ validator: validatePass, message: '重量不能为空', trigger: 'blur' }]"
                          label-width="0"
                          :prop="`woodInfoList.${$index}.weight`"
                        >
                          <el-input-number
                            v-model="row.weight"
                            controls-position="right"
                            style="width: 100%;"
                            :min="0"
                          >
                          </el-input-number>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="件数" align="center">
                      <template #default="{ row, $index }">
                        <el-form-item
                          label-width="0"
                          :rules="[{ validator: validatePass, message: '件数不能为空', trigger: 'blur' }]"
                          :prop="`woodInfoList.${$index}.pieceNumber`"
                        >
                          <el-input-number
                            v-model="row.pieceNumber"
                            controls-position="right"
                            style="width: 100%;"
                            :min="0"
                          >
                          </el-input-number>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                      <template #default="{ row, $index }">
                        <el-button
                          size="small"
                          icon="el-icon-delete"
                          type="text"
                          @click="handleDeletePackage(row, $index)"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-scrollbar>
            </el-col>
            <el-col :span="24">
              <el-button icon="el-icon-plus" type="primary" @click="handleAddPackage">添加包裹</el-button>
            </el-col>
          </el-row>
          <!-- 合计信息 -->
          <el-row :gutter="76">
            <el-col
              :span="8"
            >
              <el-form-item label="总件数" prop="receivingTotal">
                <el-input v-model="form.receivingTotal" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
            >
              <el-form-item label="总实重" prop="receivingTotalWeight">
                <el-input v-model="form.receivingTotalWeight" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
            >
              <el-form-item label="体积" prop="totalVolumeSquare">
                <el-input v-model="form.totalVolumeSquare" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
            >
              <el-form-item label="总体积重" prop="receivingTotalWood">
                <el-input v-model="form.receivingTotalWood" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
            >
              <el-form-item label="总计费重" prop="receivingTotalCharging">
                <el-input v-model="form.receivingTotalCharging" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="24">
            <el-col :span="24" class="bt">
              <div class="subtitle">提单信息</div>
            </el-col>
            <el-col
              :span="12"
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
            >
              <el-form-item label="发货人" prop="consignor" style="width: 100%;">
                <el-input
                  v-model="form.consignor"
                  clearable
                  type="textarea"
                  :rows="3"
                  placeholder="若有公司,请把公司写在最前面：如（湖南xxx公司 + 发货人地址)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
            >
              <el-form-item label="收货人" prop="consignee" style="width: 100%;">
                <el-input
                  v-model="form.consignee"
                  clearable
                  type="textarea"
                  :rows="3"
                  placeholder="若有公司,请把公司写在最前面：如（湖南xxx公司 + 收货人地址)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col
              :span="12"
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
            >
              <el-form-item label="通知人1" prop="notifier1" style="width: 100%;">
                <el-input
                  v-model="form.notifier1"
                  clearable
                  type="textarea"
                  :rows="3"
                  placeholder="若有公司,请把公司写在最前面：如（湖南xxx公司 + 通知人1地址)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
            >
              <el-form-item label="通知人2" prop="notifier2" style="width: 100%;">
                <el-input
                  v-model="form.notifier2"
                  clearable
                  type="textarea"
                  :rows="3"
                  placeholder="若有公司,请把公司写在最前面：如（湖南xxx公司 + 通知人2地址)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="76">
            <el-col :span="8">
              <el-form-item label="唛头" prop="shippingMark">
                <el-input v-model="form.shippingMark" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输条款" prop="transportClause">
                <el-input v-model="form.transportClause" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="提单形式" prop="ladingForm">
                <el-input v-model="form.ladingForm" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="到货时间" prop="arrivalTime">
                <el-date-picker
                  v-model="form.arrivalTime"
                  style="width:100%"
                  type="date"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="送货日期" prop="deliveryDate">
                <el-date-picker
                  v-model="form.deliveryDate"
                  style="width:100%"
                  clearable
                  type="date"
                  placeholder=""
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商编" prop="hsCode">
                <el-input v-model="form.hsCode" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="储存注意事项" prop="storageConsiderations">
                <el-input v-model="form.storageConsiderations" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 订舱备注 -->
          <el-row :gutter="24" class="booking">
            <el-col
              :span="12"
            >
              <el-form-item label="订舱备注" prop="bookingRemarks">
                <el-input
                  v-model="form.bookingRemarks"
                  clearable
                  type="textarea"
                  :rows="3"
                  placeholder="请输入订舱备注"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
            >
              <el-form-item label="操作备注" prop="operationRemarks">
                <el-input
                  v-model="form.operationRemarks"
                  clearable
                  type="textarea"
                  :rows="3"
                  placeholder="请输入订舱备注"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 内部信息 -->
          <el-row>
            <el-col :span="24" class="bt">
              <div class="subtitle">内部信息</div>
            </el-col>
            <el-row :gutter="76">
              <el-col
                :span="8"
              >
                <el-form-item label="业务人员" prop="salesman">
                  <el-input v-model="form.salesman" />
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="客服人员" prop="customerServiceStaff">
                  <el-input v-model="form.customerServiceStaff" />
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
              >
                <el-form-item label="付款方式" prop="paymentMethod">
                  <el-input v-model="form.paymentMethod" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div v-if="title=== '修改'" class="edit-right-btn">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button type="info" @click="cancle">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox, ElButton } from 'element-plus'
// import { Edit, Delete, Search, Refresh, Plus, Download, Document, Calendar } from '@element-plus/icons-vue'
import { airOrderInfo, editAirInfo } from '@/api/expressManager/flySea'
import useDicts, { DictDirection } from '@/store/modules/dicts'

const orderInfo = ref(),
  {
    appContext: {
      config: {
        globalProperties: { $validateForm },
      },
    },
  } = getCurrentInstance()
const dicts = useDicts()
dicts.setDicts(DictDirection.客户)
dicts.setDicts(DictDirection.运输类型)
dicts.setDicts(DictDirection.货物类型)
dicts.setDicts(DictDirection.报价类型)
dicts.setDicts(DictDirection.服务商)
dicts.setDicts(DictDirection.服务渠道)
const rules = {
  ladingNo: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
  transportType: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
  caseNo: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
  departureTime: [{ required: true, message: '请选择时间', trigger: ['change'] }],
  customerCode: [{ required: true, message: '请输入客户名称', trigger: ['blur', 'change'] }],
  providerServiceCode: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
  serviceChannelCode: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
  terminalDeliveryAddress: [{ required: true, message: '必填', trigger: ['blur', 'change'] }],
  valueGoods: [{ required: false, type: 'number', message: '请输入数字', trigger: ['blur', 'change'] }],
}
const open = ref(false)
const idss = ref(undefined)
const orderNos = ref(undefined)
const loading = ref(false)
const title = ref(undefined)
const { proxy } = getCurrentInstance() as any
const form = ref({
  ladingNo: '',
  quotationNo: '',
  waybillNo: '',
  tradeTerms: '',
  caseNo: '',
  transportType: '1',
  serviceTypeList: [],
  customerName: '',
  providerServiceCode: '',
  serviceChannelCode: '',
  customerCode: '',
  foreignAgent: '',
  airlineCompany: '',
  consigneeCountry: '',
  consigneePostcode: '',
  // transportType:10,
  valueGoods: 0,
  estimatedArrangementTime: '',
  classno: '',
  receivingTotal: '',
  receivingTotalWeight: '',
  totalVolumeSquare: 0,
  receivingTotalWood: 0,
  receivingTotalCharging: '',
  consignor: '',
  consignee: '',
  notifier1: '',
  notifier2: '',
  shippingMark: '',
  transportClause: '',
  ladingForm: '',
  arrivalTime: '',
  deliveryDate: '',
  hsCode: '',
  storageConsiderations: '',
  bookingRemarks: undefined,
  operationRemarks: undefined,
  salesman: undefined,
  customerServiceStaff: undefined,
  paymentMethod: '',
  departureTime: '',
  marketProducts: '',
  remarks: '',
  woodInfoList: [{ length: '', width: '', height: '', weight: '', pieceNumber: '' }],
  terminalDeliveryAddress: '',
})
const cities = ref(['订舱', '拖车', '报关', '海外段', '保险', '熏蒸', '买单', '办证', '制单', '危险品', '包板', '后端派送'])
// eslint-disable-next-line no-redeclare
interface form {
  woodInfoListList: string;
  length: string;
  width: string;
  height: string;
  weight: string;
  pieceNumber: string
}
const initData = () => {
  loading.value = true
  const ids = idss.value
  airOrderInfo(ids).then(res => {
    if (res.code == 200) {
      console.log(res)
      proxy.form = res.data
    } else {
      ElMessage.error(res.msg)
    }
  }).finally(() => {
    loading.value = false
  })
}
// 添加包裹
const handleAddPackage = () => {
  form.value.woodInfoList.push({ length: '', width: '', height: '', weight: '', pieceNumber: '' })
}
const validatePass = (rule, value, callback) => {
  if (value === '' || value == 0 || value == undefined) {
    callback(new Error('请输入包裹信息'))
  } else {
    callback()
  }
}
// 删除包裹
const handleDeletePackage = (row: { [key: string]: any }, index) => {
  ElMessageBox.confirm('此操作将永久删除该包裹信息, 是否继续?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => {
    form.value.woodInfoList.splice(index, 1)
    ElMessage.success('删除成功')
  })
  .catch(() => {
    ElMessage.error('删除失败')
  })
}

// cancle
const cancle = () => {
  open.value = false
  proxy.$refs.orderInfo.resetFields()
}
// 提交
const submit = () => {
  console.log(form.value)
  $validateForm(orderInfo.value, () => {
    editAirInfo(form.value).then(res => {
      if (res.code === 200) {
        ElMessage.success('修改成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
// 合计
const getSummaries = (param) => {
  // const data = Array.from(data)
  const { columns, data } = param
  const sums = []
  let values = []
  let aa = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    } if (index === 5) {
      values = data.map((item) => Number(item.pieceNumber))
    } else if (index == 1 || index == 2 || index == 3 || index == 6) {
      sums[index] == ''
      return
    } else {
      values = data.map((item) => Number(item[column.property] * item.pieceNumber))
    }
    // eslint-disable-next-line no-restricted-globals
    if (!values.every((value) => isNaN(value))) {
      sums[index] = values
      .reduce((prev, curr) => {
        const value = Number(curr)
        // eslint-disable-next-line no-restricted-globals
        if (!isNaN(value)) {
          return prev + curr
        } 
        return prev
      }, 0)
      .toFixed(2)
      sums[index] += ''
    } else {
      sums[index] = '0'
    }
  })
  aa = data.map((item) => Math.ceil((Number(item.length * Number(item.width) * Number(item.height)) / 167) * Number(item.pieceNumber)))
  let s = 0
  aa.forEach((val) => {
    // eslint-disable-next-line no-restricted-globals
    if (!isNaN(val)) {
      s += val
    }
  })
  proxy.form.receivingTotal = Math.ceil(sums[5])
  const weight = Math.ceil(sums[4])
  proxy.form.totalVolumeSquare = s
  proxy.form.receivingTotalWood = Math.ceil(s / 0.006)
  if (proxy.form.totalVolumeSquare > weight) {
    proxy.form.receivingTotalCharging = JSON.parse(JSON.stringify(proxy.form.totalVolumeSquare))
  } else if (proxy.form.totalVolumeSquare < weight) {
    proxy.form.receivingTotalCharging = JSON.parse(JSON.stringify(weight))
  } else {
    proxy.form.receivingTotalCharging = 0
  }
  proxy.form.receivingTotalWeight = weight
  return sums
}
defineExpose({
  open,
  title,
  initData,
  loading,
  idss,
  orderNos,
})
</script>
<style lang="less" scoped>
:deep(.el-form-item.el-form-item--default.serviceType-list){
    display: flex;
    .el-form-item__label{
       width:80px;
    }
    .el-form-item__content{
       flex:1;
    }
    .el-checkbox-group{
      flex-wrap:wrap
    }
}
.air-sea-edit{
  :deep(.el-overlay .el-dialog){
     width: 960px;
     height: 580px;
     display: flex;
     flex-direction: column;
     .el-dialog__body{
       overflow: hidden;
       padding-bottom: 0;
       flex:1
     }
  }
  :deep(.el-form-item){
     margin-right: 0
  }
  :deep(.el-table .el-table__body .el-table__row .cell){
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom:-22px;
    .el-button{
       margin-bottom: 22px;
    }
  }
  :deep(.el-row){
    width:100%
  }
}
.subtitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.app-container {
  background: #fff;
  margin: 10px;
  border-radius: 10px;
  padding: 10px;
}
.air-sea-edit /deep/.el-input ,
.air-sea-edit /deep/.el-input .el-input__wrapper {
  width: 100%;
}

.edit-right-btn{
   text-align: right
}
</style>
